<template>
  <view class="group-container">
    <!-- 用 scroll-view 包裹可滚动区域 -->
    <scroll-view 
      class="scroll-wrap" 
      scroll-y 
      show-scrollbar="false" 
      :style="{ height: containerHeight }"
    >
      <!-- 顶部头像及群信息区域 -->
      <view class="top-section">
        <image class="avatar" :src="'/static/logo.png'"></image>
        <view class="group-info">
          <view class="group-name-wrap">
            <!-- 群名单行溢出隐藏 -->
            <text class="group-owner">群名:杨秋儒 是内鬼</text> 
          </view>
          <!-- 群人数、群号拆分展示 -->
          <view class="group-base-info">
            <text class="group-count">人数:891人</text>
            <view class="ids">
              <view class="group-id">群号：924715942</view>
              <view class="copy-btn" @click="copyHandler">
                <text>复制</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 群介绍文本区域：折叠/展开逻辑 -->
      <view class="desc-section">
        <text 
          class="desc-text" 
          :style="{
            WebkitLineClamp: showAll ? '' : '3',
            WebkitBoxOrient: 'vertical',
            display: '-webkit-box',
            overflow: 'hidden'
          }"
        >
          杨秋儒，宝藏男孩，杨字开头，秋字居中，儒字结尾，短短三个字，就足够我听他歌一辈子，跟我一起喊：混音超牛杨秋儒✨❤️人间理想杨秋儒✨❤️温柔体贴杨秋儒✨❤️不可替代杨秋儒✨❤️声线好听杨秋儒✨❤️金光闪闪杨秋儒✨❤️宝藏男孩杨秋儒✨❤️你可以错过黄昏的末班车🚌，可以错过雨后彩虹🌈，你可以错过流星雨🌠，可以错过四月的樱花🌸，你可以错过精彩的电影🎞️，可以错过奇妙的时光⌛，你可以错过很多很多，但千万不要错过宝藏男孩杨秋儒✨❤️
        </text>
        <text 
          class="toggle-text" 
          @click="toggleDesc"
        >
          {{ showAll ? '收起' : '展开' }}
        </text>
      </view>

      <!-- 建群时间等信息区域 -->
      <view class="meta-info">
        <text>建群时间：2023-09-15</text>
      </view>

      <!-- 统计信息区域：横向排列，仅百分比动态 -->
      <view class="stats-section">
        <view 
          class="stat-item" 
          v-for="(item, index) in statsList" 
          :key="index"
        >
          <text>{{ item.label }}</text>
          <!-- 单独给百分比做动态绑定 -->
          <text 
            :class="['stat-percent', item.colorClass]" 
            ref="percentRefs"
            :data-target="item.percent"
          >{{ animatedPercent[index] }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部申请按钮（固定定位，不受滚动影响） -->
    <button class="apply-btn" @click="Apply">申请加群</button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const showAll = ref(false) 
// 统计项数据
const statsList = ref([
  { label: '活跃109人', percent: 12, colorClass: 'orange' },
  { label: '女641人', percent: 71, colorClass: 'pink' },
  { label: '杭州9人', percent: 1, colorClass: 'orange' },
  { label: '00后650人', percent: 72, colorClass: 'green' }
])
// 用于存储动态的百分比值
const animatedPercent = ref(statsList.value.map(() => '0%')) 
// 动态计算 scroll-view 高度
const containerHeight = ref('') 

// 复制逻辑
const copyHandler = () => {
  const groupId = '924715942' 
  uni.setClipboardData({
    data: groupId,
    success: () => {
      uni.showToast({
        title: '已复制群号',
        icon: 'none'
      })
    },
    fail: (err) => {
      console.error('复制失败：', err)
      uni.showToast({
        title: '复制失败，请重试',
        icon: 'none'
      })
    }
  })
}

const toggleDesc = () => {
  showAll.value = !showAll.value
}

// 仅百分比动态增长逻辑
onMounted(() => {
  statsList.value.forEach((item, index) => {
    let current = 0
    const target = item.percent
    const timer = setInterval(() => {
      if (current >= target) {
        clearInterval(timer)
        return
      }
      current += 1
      animatedPercent.value[index] = `${current}%`
    }, 50) // 控制动画速度，数值越小越快
  })
})

// 动态计算 scroll-view 高度（减去按钮高度、上下 padding，避免重叠）
onReady(() => {
  uni.getSystemInfo({
    success: (res) => {
      // 按钮高度 50px、上下 padding 各 15px，总共预留 50 + 15*2 = 80px 
      containerHeight.value = `${res.windowHeight - 80}px` 
    }
  })
})

const Apply = ()=>{
	uni.navigateTo({
		url:"/pages/chat/ApplyGroup"
	})
}
</script>

<style lang="less" scoped>
.group-container {
  position: relative;
  width: 100%;
  background-color: #fff;
  /* 给整体容器添加上下左右内边距，让内容和边框产生距离 */
  padding: 15px; 
  /* 让子元素 scroll-view 占满可用空间（减去 padding 影响） */
  box-sizing: border-box; 
  overflow: hidden; 
}

/* scroll-view 样式，隐藏滚动条 */
.scroll-wrap {
  width: 100%;
  /* iOS 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none; 
  }
  /* 安卓隐藏滚动条（部分机型需要） */
  scrollbar-width: none; 
}

.top-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;

  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 8px;
  }

  .group-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .group-name-wrap {
    display: flex;
    flex-direction: column;

    .group-owner {
      font-size: 16px;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%; 
    }
  }

  .group-base-info {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .ids {
      display: flex;
      align-items: center;
	  justify-content: space-between;
      gap: 10px;

      .group-id {
        font-size: 14px;
        color: #333;
      }

      .copy-btn {
        padding: 4px 8px;
        font-size: 12px;
        color: #007aff;
        border: 1px solid #007aff;
        border-radius: 4px;
      }
    }
  }
}

.desc-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;

  .desc-text {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
  }

  .toggle-text {
    align-self: flex-end;
    font-size: 14px;
    color: #007aff;
  }
}

.meta-info {
  font-size: 12px;
  color: #999;
  padding: 10px 0;
}

/* 统计信息区域：横向排列 */
.stats-section {
  display: flex;
  flex-direction: row;
  gap: 10px; /* 统计项之间的间距 */
  flex-wrap: nowrap; /* 不换行，强行一排（内容多了会挤，可按需改wrap） */
  overflow-x: auto; /* 内容超出时可横向滚动（按需决定是否保留） */
  padding: 10px 0;

  /* 隐藏横向滚动条（如果开启了横向滚动） */
  &::-webkit-scrollbar {
    display: none; 
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #333;
  min-width: 80px; /* 给每个统计项最小宽度，避免挤压 */
  text-align: center;
}

.stat-percent {
  font-size: 14px;
  font-weight: bold;
}
/* 不同颜色的百分比样式 */
.orange {
  color: #ff9933; 
}
.pink {
  color: #ff80ab; 
}
.green {
  color: #00cc99; 
}

/* 底部申请按钮样式 */
.apply-btn {
  width: calc(100% - 30px);
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  font-weight: bold;
  background: linear-gradient(to right, #38bdf8, #60a5fa); 
  color: #fff;
  border-radius: 25px; 
  position: absolute;
  bottom: 20px;
  left: 15px;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4); 
  border: none;
  outline: none;
  transition: all 0.3s ease;
}

.apply-btn:active {
  transform: scale(0.98); 
  box-shadow: 0 2px 6px rgba(56, 189, 248, 0.4);
}
</style>